<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import ContentTitle from '@/components/ContentTitle/index.vue'
import ItemUser from './components/ItemUser/index.vue'
import ItemView from './components/ItemView/index.vue'
import APIDynamic from '@/api/dynamic'
import SelfPagination from '@/components/SelfPagination/index.vue'
import type { TrendsType, TrendsListResult } from '@/api/dynamic/types'

const activeName = shallowRef<TrendsType>('footprint')

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})


const trendsList = ref<TrendsListResult[]>([])
const total = shallowRef<number>(0)
const loading = shallowRef<boolean>(false)
function getTrends() {
    loading.value = true
    APIDynamic.getTrends(queryParams.value, activeName.value).then(({ data, total: count }) => {
        trendsList.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

function getUserConcern() {
    loading.value = true
    APIDynamic.getUserConcern(queryParams.value).then(({ data, total: count }) => {
        trendsList.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

watch(activeName, (newValue) => {
    trendsList.value = []
    queryParams.value = {
        page: 1,
        limit: 8
    }
    if (newValue == 'concern') {
        getUserConcern()
    } else {
        getTrends()
    }
}, { immediate: true })


</script>

<template>
    <div class="dynamic">
        <Content class="content">
            <ContentTitle title="动态" />
            <el-tabs v-model="activeName" class="tabs">
                <el-tab-pane label="足迹" name="footprint"></el-tab-pane>
                <el-tab-pane label="关注" name="concern"></el-tab-pane>
                <el-tab-pane label="点赞" name="like"></el-tab-pane>
                <el-tab-pane label="收藏" name="collect"></el-tab-pane>
                <el-tab-pane label="转发" name="share"></el-tab-pane>
            </el-tabs>
            <div v-loading="loading">
                <el-empty description="暂无内容" v-if="trendsList && trendsList.length == 0" />
                <div v-if="activeName != 'concern'">
                    <ItemView v-for="item in trendsList" :key="item.id" :trend="item" />
                </div>
                <div v-if="activeName == 'concern'">
                    <ItemUser v-for="item in trendsList" :key="item.id" :trend="item" @on-unfollow="getUserConcern" />
                </div>
            </div>
            <SelfPagination style="margin-top: 50px;margin-right: 30px;" :total="total"
                v-model:current-page="queryParams.page" :page-size="queryParams.limit" @get-list="getTrends" />
        </Content>
    </div>
</template>

<style lang="scss" scoped>
.dynamic {
    .content {
        .tabs {
            margin-top: 10px;

            &:deep(.el-tabs__item.is-active) {
                color: #F91414;
            }

            &:deep(.el-tabs__active-bar) {
                background-color: #F91414;
                height: 1px;
            }

            &:deep(.el-tabs__item) {
                &:hover {
                    color: #F91414;
                }
            }

            &:deep(.el-tabs__nav-wrap) {
                &:after {
                    height: 1px !important;
                }
            }
        }
    }
}
</style>
